/** 
css 居中弹性盒子
    1.1.display: flex, f lai k s 
      2.align-items: center  额来，哎特母z
      3.justify-context: center  佳斯特fai  看滕特
    2.diplay：table-cell
    3.vertical-align:middle;
  一、绝对定位元素的居中实现
          width: 100px;
          height: 100px;
          position: absolute;
          top: 50%;
          left: 50%;
          margin-top: -50px; 高度的一半
          margin-left: -50px; 宽度的一半
          缺点：需要提前知道元素的尺寸。如果不知道元素尺寸
            CSS3.0的兴起，使这个问题有了更好的解决方法，就是使用 transform 代替 margin 。
            transform 中 translate 偏移的百分比是相对于自身大小而说的。
            transform: translate( -50%, -50%);
  二、margin: auto;实现绝对定位元素的居中
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          margin: auto;
    六、相对定位
        width: 300px;
        height: 300px;    
        background: orange;
        margin: 0 auto;  水平居中
        position: relative; 设置position
        top: 50%; 偏移
        margin-top: -150px;  
        第一种：margin-top
        transform: translateY(-50%);第二种：transform：转换
*/
